import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { actionCreators }  from './store';
// import { bindActionCreators } from 'redux';
import { 
  HeaderWrapper, 
  Logo, 
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  SearchInfoList
} from'./style'


class Header extends Component {


  getListArea = () => {
    const { focused, mouseIn, list, totalPage, page, handleMouseEnter,handleMouseLeave, handleCheangPage } = this.props;
    const newList = list.toJS();
    const pageList = [];
    
    if(!newList.length) return;

    for(let i = (page - 1) * 10; i < page * 10; i++) {
      if(!!newList[i]) {
        pageList.push(<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>)
      }
    }
    
    if(focused || mouseIn) {
      return(
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch 
              onClick={() => handleCheangPage(page, totalPage, this.spinIcon)}
            >
              <i ref={incon => this.spinIcon = incon} className="iconfont spin">&#xe851;</i>
              换一批
            </SearchInfoSwitch>
            </SearchInfoTitle>
            <SearchInfoList>
              { pageList }
            </SearchInfoList>
        </SearchInfo>
      )
    }
  }
  
  render(){
    const { focused, list, handleInputFocus, handleInputBlur } = this.props;
    return (
      <HeaderWrapper>
        <Logo href="/" />
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left"><i className="iconfont">&#xe610;</i>下载App</NavItem>
          <NavItem className="right">登录</NavItem>
          <NavItem className="right"><i className="iconfont">&#xe636;</i></NavItem>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={500}
              classNames="slide"
            >
              <NavSearch 
                className={focused ? "focused" : ""} 
                onFocus={() => handleInputFocus(list)}
                onBlur={handleInputBlur}
              />
            </CSSTransition>
              <i className={focused ? "focused iconfont zoom" : "iconfont zoom"}>&#xe614;</i>
              {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className="writting">
            <i className="iconfont">&#xe615;</i>
            写文章
          </Button>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = state => {
  return {
    focused: state.getIn(['header','focused']),
    list: state.getIn(['header', 'list']),
    mouseIn: state.getIn(['header','mouseIn']),
    totalPage: state.getIn(['header', 'totalPage']),
    page: state.getIn(['header','page'])
  }
}

const mapDispathToProps = dispath => {
  return {
    handleInputFocus(list) {
      list.toJS().length === 0 && dispath(actionCreators.getList());
      dispath(actionCreators.searchFocus())
    },
    handleInputBlur() {
      dispath(actionCreators.searchBlur())
    },
    handleMouseEnter() {
      dispath(actionCreators.mouseEnter())
    },
    handleMouseLeave() {
      dispath(actionCreators.mouseLeave())
    },
    handleCheangPage(page,totalPage, spinIcon) {
      let originAngle = spinIcon.style.transform.replace(/[^0-9]/ig, '')
      originAngle  ? originAngle = ~~ originAngle : originAngle = 0;

      spinIcon.style.transform = `rotate(${originAngle + 360}deg)`

      if(page < totalPage) {
        dispath(actionCreators.cheangePage(page + 1))
      }else {
        dispath(actionCreators.cheangePage(1))
      }
    }
  }
}

export default connect(mapStateToProps,mapDispathToProps)(Header);